<template>
  <div class="orgWrap">
    <div class="flex_start mb-1">
      <el-button type="primary" :icon="'Plus'" @click="addOrgFunc">新增</el-button>
    </div>

    <div class="flex_between">
      <el-tree class="treeWrap" :data="data" :props="defaultProps" default-expand-all @node-click="handleNodeClick">
        <template #default="{ node, data }">
          <span class="custom-tree-node listItem flex_between">
            <span>{{ node.label }}</span>
            <span class="itemRight">
              <el-button link type="primary" size="small" @click.stop="addNextOrg(data)" v-if="node.level <= 2">
                新增子级
              </el-button>
              <el-button link type="primary" size="small" @click.stop="updateOrgFunc(data)">
                编辑
              </el-button>

              <el-popconfirm title="确定删除吗?" @confirm="delOrgFunc(data)">
                <template #reference>
                  <el-button link type="danger" size="small"> 删除 </el-button>
                </template>
              </el-popconfirm>
            </span>
          </span>
        </template>
      </el-tree>
      <div class="iptWrap">
        <p class="flex_start palign">
          <span>父级节点：</span>
          
          <el-input
            v-model="pName"
            disabled
            readonly
            placeholder="请点击父节点"
            clearable
            class="iptwidth mb-2"
          />
        </p>

        <p class="flex_start palign">
          <span>节点ID：</span>

          <el-input
            v-model="orgForm.code"
            placeholder="请输入节点ID"
            clearable
            class="iptwidth mb-2"
          />
        </p>
        <p class="flex_start palign">
          <span>菜单名称：</span>

          <el-input
            v-model="orgForm.name"
            placeholder="请输入菜单名称"
            clearable
            class="iptwidth mb-2"
          />
        </p>
        <p class="flex_start palign">
          <span>菜单备注：</span>

          <el-input
            v-model="orgForm.remark"
            placeholder="请输入备注"
            clearable
            class="iptwidth mb-2"
          />
        </p>
        <p class="flex_start palign">
          <span>排序：</span>
          <el-input
            v-model="orgForm.sort"
            type="number"
            placeholder="请输入排序数字"
            clearable
            class="iptwidth mb-2"
          />
        </p>
        <div class="flex_start" v-if="isContrller">
          <el-button type="primary" @click="saveOrgFunc" v-if="!isUpdate">保存</el-button>
          <el-button type="primary" @click="updateOrgFunc2" v-if="isUpdate">更新</el-button>
          <el-button @click="cancelAction">取消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script >
import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue';
import {
  findMenuTree,
  addMenuTree,
  updateMenuTree,
  deleteMenuTree,
  getMenuTreeById,
} from '@/api/system/menu/index.ts';
import { ElMessage, ElMessageBox } from 'element-plus';

export default defineComponent({
  setup() {
    const state = reactive({
      orgForm: {
        pid: '-1',
        name: '',
        code:'',
        remark:'',
        sort: '',
        id: '',
      },
      isContrller: false,
      isUpdate: false,
      pName: '-1',
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      data: [],
    });
    const queryDataTree = () => {
      findMenuTree({}).then((res) => {
        // console.log('treeData==>', res);
        state.data = res;
      });
    };
    const handleNodeClick = (data) => {
      //   console.log('当前点击的节点===>', data);
      //   state.orgForm.pid = data.id || '-1'
      //   getInfoTreeItem(data.id).then((res) => {
      //     console.log('res', res);
      //     const { pid, sort, id, name } = res;
      //     state.orgForm.pid = pid;
      //     state.orgForm.id = id;
      //     state.orgForm.name = name;
      //     state.orgForm.sort = sort;
      //   });
      //   state.orgForm.name = data.label
    };
    const infoSet = (data) => {
      getMenuTreeById(data.id).then((res) => {
        const { pid, sort, id, name, pname ,remark,code} = res;
        if (state.isUpdate) {
          state.orgForm = {
            pid,
            id,
            sort,
            name,
            remark,
            code,
          };
          if (pid == -1) {
            state.pName = -1;
          } else {
            state.pName = pname;
          }
        } else {
          state.orgForm.name = '';
          state.orgForm.remark = '';
          state.orgForm.code = '';
          state.orgForm.sort = '';
          state.orgForm.pid = id;

          state.pName = name;
        }
      });
    };
    const addOrgFunc = () => {
      state.isUpdate = false;
      state.isContrller = true;
      state.pName = -1
    };
    const updateOrgFunc = (data) => {
      state.isUpdate = true;
      state.isContrller = true;
      infoSet(data);
     
    };

    const saveOrgFunc = () => {
      if (!state.orgForm.name) {
        ElMessage({
          message: '请输入菜单名称',
          type: 'warning',
        });
        return;
      }
      if (!state.orgForm.sort) {
        ElMessage({
          message: '请输入排序数字',
          type: 'warning',
        });
        return;
      }
      delete state.orgForm.id;
      addMenuTree(state.orgForm).then((resAdd) => {
        state.orgForm = {
          pid: '-1',
          name: '',
          sort: '',
          id: '',
        };
        state.isContrller = false;
        queryDataTree();
      });
    };
    // 新增下级
    const addNextOrg = (data) => {
      state.isUpdate = false;
      state.isContrller = true;
      infoSet(data);
      
    };
    const updateOrgFunc2 = () => {
      if (!state.orgForm.name) {
        ElMessage({
          message: '请输入部门名称',
          type: 'warning',
        });
        return;
      }
      if (!state.orgForm.sort) {
        ElMessage({
          message: '请输入排序数字',
          type: 'warning',
        });
        return;
      }
      delete state.orgForm.pid;
      updateMenuTree({
        id: state.orgForm.id,
        name: state.orgForm.name,
        remark: state.orgForm.remark,
        code: state.orgForm.code,
        sort: state.orgForm.sort,
      }).then((resAdd) => {
        state.orgForm = {
          pid: '-1',
          name: '',
          sort: '',
          id: '',
          code:'',
          remark:'',
        };
        state.isContrller = false;
        queryDataTree();
      });
    };
    const delOrgFunc = (data) => {
      deleteMenuTree(data.id).then((res) => {
        queryDataTree();
      });
    };
    const cancelAction = () => {
        state.isContrller = false
        state.orgForm = {
          pid: '-1',
          name: '',
          sort: '',
          id: '',
          code:'',
          remark:'',
        };
    }
    onMounted(() => {
      queryDataTree();
    });
    return {
      ...toRefs(state),
      handleNodeClick,
      queryDataTree,
      addOrgFunc,
      updateOrgFunc,
      delOrgFunc,
      saveOrgFunc,
      updateOrgFunc2,
      addNextOrg,
      infoSet,
      cancelAction,
    };
  },
});
</script>
<style lang="less" scoped>
.orgWrap {
  .treeWrap {
    width: 40%;
  }
  .iptWrap {
    :deep(.el-input__inner) {
      color: #333 !important;
    }
    width: 60%;
    .iptwidth {
      width: 80%;
    }
    .mb-2 {
      margin-bottom: 20px;
    }
    .palign {
      align-items: baseline;
      span {
        display: inline-block;
        width: 100px;
        text-align: right;
        &::before {
          content: '*';
          color: #f5222d;
        }
      }
    }
  }
  .listItem {
    width: 80%;
    .itemRight {
      button {
        font-weight: 400;
      }
    }
  }
}
</style>
